<template>
  <div class="login-container flex-y-center">
    <div class="login-box flex flex-col gap-6">
      <h1 class="text-center font-bold text-white select-none">ACM基地积分管理系统</h1>
      <div :class="inputBoxStyle">
        <guat-icon icon="ph:user" :size="24" />
        <input
          v-model.trim="loginUser.userNo"
          :class="inputComponentStyle"
          type="text"
          placeholder="请输入学号"
        />
      </div>
      <div :class="inputBoxStyle">
        <guat-icon icon="ph:lock-key" :size="24" />
        <input
          v-model.trim="loginUser.userPsw"
          :class="inputComponentStyle"
          type="password"
          placeholder="请输入密码"
        />
      </div>
      <div class="flex gap-4">
        <div class="flex-1" :class="inputBoxStyle">
          <guat-icon icon="ph:shield-check" :size="24" />
          <input
            v-model.trim="loginUser.captcha"
            :class="inputComponentStyle"
            type="text"
            placeholder="请输入验证码"
          />
        </div>
        <div class="w-40 h-[52px] bg-white"></div>
      </div>
      <a-button class="!h-10 !rounded-lg" size="large" long type="primary" @click="handleLogin">
        登 录
      </a-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { RouteName } from "@/constant/route";
import useUserStore from "@/store/user";
import { isEmpty } from "lodash-es";

const loginUser = reactive({
  userNo: "",
  userPsw: "",
  captcha: "",
});

const router = useRouter();
const inputBoxStyle = "flex-y-center gap-2 rounded-lg py-2 px-4 bg-white/80";
const inputComponentStyle = "w-full h-9 outline-none p-2 text-base bg-transparent";
const userStore = useUserStore();
const { success, error } = useMessage();

const validate = () => {
  if (isEmpty(loginUser.userNo)) {
    error("请输入学号");
    return false;
  } else if (isEmpty(loginUser.userPsw)) {
    error("请输入密码");
    return false;
  } else if (isEmpty(loginUser.captcha)) {
    error("请输入验证码");
    return false;
  }
  return true;
};

const handleLogin = () => {
  if (validate()) {
    success({
      content: "登录成功",
      onClose: () => {
        if (userStore.login(loginUser)) router.replace({ name: RouteName.ROOT });
      },
    });
  }
};
</script>

<style scoped>
.login-container {
  height: 100vh;
  background: url("@/assets/login_bg.png") 0 0 no-repeat;
  background-position: right;
}
.login-box {
  position: relative;
  margin-left: 256px;
  padding: 24px;
  border-radius: 8px;
  background-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  z-index: 999;
}
</style>
